<%--
  Created by IntelliJ IDEA.
  User: name
  Date: 2023/9/26
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>类型信息</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<fieldset style="border: 1px solid transparent; border-top-color: grey;">
    <legend>商品类型信息总览</legend>
</fieldset>

<div id="app">
    <el-tabs type="border-card">
        <el-tab-pane label="键盘颜色">

            <el-input v-model="keyboardcolorid" placeholder="请输入ID搜索" style="width: 200px"></el-input>
            <el-input v-model="keyboardcolorname" placeholder="请输入键盘颜色搜索" style="width: 200px"></el-input>
            <el-button
                    type="primary"
                    @click="search()">查询
            </el-button>
            <br><br>
            <el-button size="mini" type="primary" @click="addDialog()" v-if="staffBranchid==12138">添加</el-button>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">

                <el-table-column
                        fixed
                        prop="keyboardcolorid"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="keyboardcolorname"
                        label="键盘颜色"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editDialog(scope.row)" v-if="staffBranchid==12138">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.keyboardcolorid)" v-if="staffBranchid==12138">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

            <!--修改的对话框
             visible.sync：控制对话框的显示true和隐藏false
         -->
            <el-dialog
                    title="修改信息"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <el-form ref="form" :model="editForm" label-width="80px">
                    <el-form-item label="键盘颜色">
                        <el-input v-model="editForm.keyboardcolorname"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmUpdate">确 定</el-button>
              </span>
            </el-dialog>


            <!--添加的对话框
                     visible.sync：控制对话框的显示true和隐藏false
                 -->
            <el-dialog
                    title="新增键盘颜色"
                    :visible.sync="dialogVisible2"
                    width="30%"
            >
                <el-form ref="form" :model="addForm" label-width="80px">
                    <el-form-item label="键盘颜色">
                        <el-input v-model="addForm.keyboardcolorname" placeholder="请输入键盘颜色"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
              </span>
            </el-dialog>

        </el-tab-pane>


        <el-tab-pane label="轴体类型">

            <el-input v-model="shaftchooseid" placeholder="请输入ID搜索" style="width: 200px"></el-input>
            <el-input v-model="shaftchoose" placeholder="请输入轴体类型搜索" style="width: 200px"></el-input>
            <el-button
                    type="primary"
                    @click="search2()">查询
            </el-button>
            <br><br>
            <el-button size="mini" type="primary" @click="addDialog2()" v-if="staffBranchid==12138">添加</el-button>
            <el-table
                    :data="tableData2"
                    border
                    style="width: 100%">

                <el-table-column
                        fixed
                        prop="shaftchooseid"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="shaftchoose"
                        label="轴体类型"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editDialog2(scope.row)" v-if="staffBranchid==12138">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete2(scope.row.shaftchooseid)" v-if="staffBranchid==12138">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage2"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total2">
            </el-pagination>

            <!--修改的对话框
             visible.sync：控制对话框的显示true和隐藏false
         -->
            <el-dialog
                    title="修改信息"
                    :visible.sync="dialogVisible3"
                    width="30%"
            >
                <el-form ref="form" :model="editForm2" label-width="80px">
                    <el-form-item label="轴体类型">
                        <el-input v-model="editForm2.shaftchoose"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="confirmUpdate2">确 定</el-button>
              </span>
            </el-dialog>


            <!--添加的对话框
                     visible.sync：控制对话框的显示true和隐藏false
                 -->
            <el-dialog
                    title="新增轴体类型"
                    :visible.sync="dialogVisible4"
                    width="30%"
            >
                <el-form ref="form" :model="addForm2" label-width="80px">
                    <el-form-item label="键盘颜色">
                        <el-input v-model="addForm2.shaftchoose" placeholder="请输入键盘颜色"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible4 = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd2">确 定</el-button>
              </span>
            </el-dialog>

        </el-tab-pane>
        <el-tab-pane label="背光颜色">


            <el-input v-model="backlightcolorid" placeholder="请输入ID搜索" style="width: 200px"></el-input>
            <el-input v-model="backlightcolorname" placeholder="请输入键盘背光搜索" style="width: 200px"></el-input>
            <el-button
                    type="primary"
                    @click="search3()">查询
            </el-button>
            <br><br>
            <el-button size="mini" type="primary" @click="addDialog3()" v-if="staffBranchid==12138">添加</el-button>
            <el-table
                    :data="tableData3"
                    border
                    style="width: 100%">

                <el-table-column
                        fixed
                        prop="backlightcolorid"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="backlightcolorname"
                        label="键盘背光"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editDialog3(scope.row)" v-if="staffBranchid==12138">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete3(scope.row.backlightcolorid)" v-if="staffBranchid==12138">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange3"
                    @current-change="handleCurrentChange3"
                    :current-page="currentPage3"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total3">
            </el-pagination>

            <!--修改的对话框
             visible.sync：控制对话框的显示true和隐藏false
         -->
            <el-dialog
                    title="修改信息"
                    :visible.sync="dialogVisible5"
                    width="30%"
            >
                <el-form ref="form" :model="editForm3" label-width="80px">
                    <el-form-item label="键盘背光">
                        <el-input v-model="editForm3.backlightcolorname"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible5 = false">取 消</el-button>
                <el-button type="primary" @click="confirmUpdate3">确 定</el-button>
              </span>
            </el-dialog>


            <!--添加的对话框
                     visible.sync：控制对话框的显示true和隐藏false
                 -->
            <el-dialog
                    title="新增轴体类型"
                    :visible.sync="dialogVisible6"
                    width="30%"
            >
                <el-form ref="form" :model="addForm3" label-width="80px">
                    <el-form-item label="键盘背光">
                        <el-input v-model="addForm3.backlightcolorname" placeholder="请输入键盘背光"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible6 = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd3">确 定</el-button>
              </span>
            </el-dialog>


        </el-tab-pane>
    </el-tabs>
</div>


<script>

    let app = new Vue({
        el: "#app",
        data: {
            //获取登录用户的分店id
            staffBranchid: "",
            //分页数据
            currentPage: 1,
            pageSize: 5,
            total: null,
            //表格数据
            tableData: [],
            //控制修改对话框
            dialogVisible: false,
            //修改表单对象
            editForm: {},
            //控制修改对话框
            dialogVisible2: false,
            //添加表单对象
            addForm: {},
            //搜索框的值
            keyboardcolorid: "",
            keyboardcolorname: "",


            /**
             * 轴体类型
             * **/
            //分页数据
            currentPage2: 1,
            pageSize2: 5,
            total2: null,
            //表格数据
            tableData2: [],
            //控制修改对话框
            dialogVisible3: false,
            //修改表单对象
            editForm2: {},
            //控制修改对话框
            dialogVisible4: false,
            //添加表单对象
            addForm2: {},
            //搜索框的值
            shaftchooseid: "",
            shaftchoose: "",


            /**
             * 背光颜色
             * **/
            //分页数据
            currentPage3: 1,
            pageSize3: 5,
            total3: null,
            //表格数据
            tableData3: [],
            //控制修改对话框
            dialogVisible5: false,
            //修改表单对象
            editForm3: {},
            //控制修改对话框
            dialogVisible6: false,
            //添加表单对象
            addForm3: {},
            //搜索框的值
            backlightcolorid: "",
            backlightcolorname: ""

        },
        created() {
            this.initTable()
            this.initTable2()
            this.initTable3()

            //获取登录用户的分店id
            this.staffBranchid ='${staff.branchid}';
        },
        methods: {
            initTable() {
                axios.get("/goodsType/keyBoardColor?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.search(val)
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.search(val)
            },
            //修改按钮事件
            editDialog(row) {
                this.dialogVisible = true;
                this.editForm =  JSON.parse(JSON.stringify(row));
            },
            //确认修改按钮事件
            confirmUpdate() {
                axios.post("/goodsType/updKeyBoardColor", this.editForm).then(resp => {
                    //刷新页面
                    this.initTable();
                    //关闭对话框
                    this.dialogVisible = false;
                })
            },
            //添加按钮事件
            addDialog() {
                this.dialogVisible2 = true;
            },
            //确认添加按钮事件
            confirmAdd() {
                axios.post("/goodsType/addKeyBoardColor", this.addForm).then(resp => {
                    //刷新页面
                    this.initTable();
                    //关闭对话框
                    this.dialogVisible2 = false;
                })
            },
            handleDelete(keyboardcolorid) {
                axios.get("/goodsType/delKeyBoardColor?keyboardcolorid=" + keyboardcolorid).then(resq => {
                    this.initTable()
                })
            },
            //根据姓名和职位查
            search(val) {
                if(val!=null){
                    this.currentPage=val
                }else{
                    this.currentPage=1
                }
                axios.get("/goodsType/searchKeyBoardColor?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&keyboardcolorid=" + this.keyboardcolorid + "&keyboardcolorname=" + this.keyboardcolorname).then(resq => {
                    this.tableData = resq.data.data.list
                    this.total = resq.data.data.total
                })
            },


            /**
             * 轴体类型
             * **/
            initTable2() {
                axios.get("/goodsType/shaftChoose?currentPage=" + this.currentPage2 + "&pageSize=" + this.pageSize2).then(resq => {
                    this.tableData2 = resq.data.data.list
                    this.total2 = resq.data.data.total
                })
            },
            handleSizeChange2(val) {
                this.pageSize2 = val
                this.search2(val)
            },
            handleCurrentChange2(val) {
                this.currentPage2 = val
                this.search2(val)
            },
            //修改按钮事件
            editDialog2(row) {
                this.dialogVisible3 = true;
                this.editForm2 =  JSON.parse(JSON.stringify(row));
            },
            //确认修改按钮事件
            confirmUpdate2() {
                axios.post("/goodsType/updShaftChoose", this.editForm2).then(resp => {
                    //刷新页面
                    this.initTable2();
                    //关闭对话框
                    this.dialogVisible3 = false;
                })
            },
            //添加按钮事件
            addDialog2() {
                this.dialogVisible4 = true;
            },
            //确认添加按钮事件
            confirmAdd2() {
                axios.post("/goodsType/addShaftChoose", this.addForm2).then(resp => {
                    //刷新页面
                    this.initTable2();
                    //关闭对话框
                    this.dialogVisible4 = false;
                })
            },
            handleDelete2(shaftchooseid) {
                axios.get("/goodsType/delShaftChoose?shaftchooseid=" + shaftchooseid).then(resq => {
                    this.initTable2()
                })
            },
            //根据姓名和职位查
            search2(val) {
                if(val!=null){
                    this.currentPage=val
                }else{
                    this.currentPage=1
                }
                axios.get("/goodsType/searchShaftChoose?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&shaftchooseid=" + this.shaftchooseid + "&shaftchoose=" + this.shaftchoose).then(resq => {
                    this.tableData2 = resq.data.data.list
                    this.total2 = resq.data.data.total
                })
            },


            /**
             * 背光颜色
             * **/
            initTable3() {
                axios.get("/goodsType/backLightColor?currentPage=" + this.currentPage3 + "&pageSize=" + this.pageSize3).then(resq => {
                    this.tableData3 = resq.data.data.list
                    this.total3 = resq.data.data.total
                })
            },
            handleSizeChange3(val) {
                this.pageSize3 = val
                this.search3(val)
            },
            handleCurrentChange3(val) {
                this.currentPage3 = val
                this.search3(val)
            },
            //修改按钮事件
            editDialog3(row) {
                this.dialogVisible5 = true;
                this.editForm3 =  JSON.parse(JSON.stringify(row));
            },
            //确认修改按钮事件
            confirmUpdate3() {
                axios.post("/goodsType/updBackLightColor", this.editForm3).then(resp => {
                    //刷新页面
                    this.initTable3();
                    //关闭对话框
                    this.dialogVisible5 = false;
                })
            },
            //添加按钮事件
            addDialog3() {
                this.dialogVisible6 = true;
            },
            //确认添加按钮事件
            confirmAdd3() {
                axios.post("/goodsType/addBackLightColor", this.addForm3).then(resp => {
                    //刷新页面
                    this.initTable3();
                    //关闭对话框
                    this.dialogVisible6 = false;
                })
            },
            handleDelete3(backlightcolorid) {
                axios.get("/goodsType/delBackLightColor?backlightcolorid=" + backlightcolorid).then(resq => {
                    this.initTable3()
                })
            },
            //根据姓名和职位查
            search3(val) {
                if(val!=null){
                    this.currentPage=val
                }else{
                    this.currentPage=1
                }
                axios.get("/goodsType/searchBackLightColor?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "&backlightcolorid=" + this.backlightcolorid + "&backlightcolorname=" + this.backlightcolorname).then(resq => {
                    this.tableData3 = resq.data.data.list
                    this.total3 = resq.data.data.total
                })
            }


        }
    })
</script>
</body>
</html>
